.app-running {
    width: 100%;
    height: 100%;
    /* 顶部 */
    .running-menu{
        padding: 0 20px;
        .menu-box{
           height: 50px;
           border-bottom: 1px solid #ccc;
           justify-content: space-evenly;
           align-items: center;

           p{
               font-size: 18px;
               color: rgba(154, 154, 154, 100);
           }
           .menu-active{
               color: rgba(66, 148, 255, 100);
               font-weight: bold;
               font-size: 20px;
               position: relative;
           }
           .menu-active::after{
               display: inline-block;
               content: '';
               position: absolute;
               top: 38px;
               left: 0px;
               width: 90%;
               height: 3px;
               background-color: rgba(66, 148, 255, .4);
           }
        }
        
    }
    .running-content{
        margin-bottom: 60px;
        

        .running-distance{
            padding: 0 20px;
            margin-top: 10px;
            height: 80px;
            justify-content: space-between;
            p{
                font-size: 16px;
            }
            span{
                font-size: 38px;
                font-weight: bold;
                color: rgba(66, 148, 255, 100);
            }
        }

        .running-map{
            margin-top: 10px;
            height: 350px;
            justify-content: space-between;

            .running-button{
                
                position: absolute;
                top: 20px;
                /* left: 20px; */
                z-index: 11;
                justify-content: space-around;
                width: 100%;

                .active{
                    background-color: rgba(66, 148, 255, 100);
                }

                p{
                    width: 100px;
                    line-height: 40px;
                    text-align: center;
                    background-color: rgba(156, 188, 226, 100);
                    color: #fff;
                    border-radius: 20px;
                }
            }
            .go{
                width: 180px;
                height: 180px;
                border-radius: 50%;
                background-color: rgba(66, 148, 255, .7);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: 111;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 80px;
                font-weight: bold;
                color: #1592cc;
            }
            .bottom-icon{
                z-index: 11;
                position: absolute;
                width: 100%;
                bottom: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                span{
                    display: inline-block;
                    width: 120px;
                    line-height: 40px;
                    background-color: #4294ff;
                    color: #fff;
                    font-size: 16px;
                    border-radius: 20px;
                    text-align: center;
                }
                p{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 18px;
                    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.4);
                    i{
                        font-size: 25px !important;
                        color: #9a9a9a;
                    }
                    
                }
            }

            .set-button{
                justify-content: space-between;
                
                .special{
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background-color: rgba(66, 148, 255, 100);
                    border-radius: 20px;
                    color: #fff;
                }
                p{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 50px;
                    height: 50px;
                    background-color: #fff;
                    border-radius: 50%;
                    text-align: center;

                    .icon-set,.icon-music{
                        font-size: 30px;
                    }
                }
            }
        }

        .running-area{
            justify-content: space-between;
            margin-top: 10px;
            height: 50px;
            padding: 0 18px;
            margin-top: 20px;
            p{
                display: flex;
                justify-content: space-between;
                span{
                    font-size: 14px;
                    color: rgba(154, 154, 154, 100);
                }

                .icon-rightreturn{
                    color: rgba(154, 154, 154, 100);
                    font-size: 18px;
                }
            }
        }
        
    }
    .running-content li{
        display: none;
        flex: 1;
    }
    .running-content .on{
        display: block;
    }

   
}